<!-- 文章列表 -->
<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="title blue">默认主题: {{ article.title }}</span>
        <el-breadcrumb separator="|" style="float: right; padding: 3px 0">
          <el-breadcrumb-item>时间: {{ time }} </el-breadcrumb-item>
          <el-breadcrumb-item
            ><i class="el-icon-view" /> <span class="blue">代码</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <i class="el-icon-chat-dot-round"></i>
            <span class="blue">评论({{ article.common_count }})</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="content">
        <div v-if="article.cover_img" class="img">
          <img :src="article.cover_img" alt="" srcset="" />
        </div>
        <div class="text" v-html="article.content"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Article",
  data() {
    return {};
  },
  props: ["article"],
  methods: {},
  computed: {
    time() {
      const date = new Date(this.article.create_time);
      return (
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
      );
    },
  },
};
</script>

<style lang="less" scoped>
.box-card {
  box-sizing: border-box;
  .blue {
    color: rgb(43, 43, 189);
  }
  .title {
    font-weight: 600;
    font-size: 17px;
  }
  .el-breadcrumb {
    padding-top: 8px;
  }
  .content {
    display: flex;
    font-size: 17px !important;
    .text {
      width: 90%;
      line-height: 20px;
      height: 75px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      -webkit-box-orient: vertical;
      /deep/h1,
      h2,
      h3 {
        font-size: 17px !important;
      }
    }
    img {
      flex: 1;
      width: 90px;
      height: 90px;
      margin-right: 10px;
      border-radius: 10px;
    }
  }
}
</style>